<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .tangram-suggestion{
            z-index: 9999;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>分院管理<small>分院管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>分院管理</el-breadcrumb-item>
            <el-breadcrumb-item>分院管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="分院编码/分院名称" v-model="pagination.queryString"  style="width: 200px;" class="filter-item"></el-input>
                <el-button @click="pagination.currentPage = 1;findPage()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="code" label="分院编号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="分院名称" align="center"></el-table-column>
                <el-table-column prop="coordinates" label="分院坐标" align="center"></el-table-column>
                <el-table-column prop="status" label="到诊状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="1"
                                inactive-value="0"
                                active-text="开启"
                                inactive-text="关闭">
                        </el-switch>

                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
            <!-- 新增标签弹层 -->
            <div class="add-form">
                <el-dialog title="新增分院" :visible.sync="dialogFormVisible">
                    <el-form label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="分院编码">
                                    <el-input v-model="formData.code"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="分院名称">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="分院坐标">
                                    <el-input id="coordinates" disabled v-model="formData.coordinates"/>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="是否启用">
                                    <el-radio v-model="formData.status" label="1">启用</el-radio>
                                    <el-radio v-model="formData.status" label="0">禁用</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="输入地址">
                                    <el-input id="adress" v-model="formData.adress"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址">
                                    <el-input v-model="formData.trueAdress"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div id='allmap' style='height: 280px;'></div>
                                <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleAdd()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 编辑标签弹层 -->
            <div class="add-form">
                <el-dialog title="编辑分院" :visible.sync="dialogFormVisible4Edit">
                    <el-form label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="分院编码">
                                    <el-input v-model="formData.code"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="分院名称">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="分院坐标">
                                    <el-input id="coordinates" disabled v-model="formData.coordinates"/>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12">
                                <el-form-item label="是否启用">
                                    <el-radio v-model="formData.status" label="1">启用</el-radio>
                                    <el-radio v-model="formData.status" label="0">禁用</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="输入地址">
                                    <el-input id="adress" v-model="formData.adress"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址">
                                    <el-input v-model="formData.trueAdress"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div id='allmap' style='height: 280px;'></div>
                                <div id="searchResultPanels" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>

        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AlpOsleN6Sq0W5pkIePRxxNwIl8oxZWF"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            activeName:'first',
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            dataList: [],//当前页要展示的分页列表数据
            tableData:[],//新增和编辑表单中对应的套餐项列表数据
            formData: {
                id:'',
                code:'',
                name:'',
                coordinates:'',
                status:'',
                adress:'',
                trueAdress:'',
            },//表单数据
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findPage();
        },
        methods: {
            //分页查询
            findPage() {
                axios.get("/sorting/findPage",{params:this.pagination}).then(resp=>{
                    console.log(resp.data);
                    //处理响应结果
                    if(resp.data.flag){
                        //查到了结果
                         this.$message.success(resp.data.message);
                        //展示表格数据
                        this.dataList=resp.data.data.rows;
                        //展示分页条数据
                        this.pagination.total=resp.data.data.total;
                    }else{
                        this.$message.error(resp.data.message);
                    }
                });
            },
            showMessage(r) {//权限不足提示
                if (r == 'Error: Request failed with status code 403') {
                    //权限不足
                    // this.$message.error('无访问权限');
                    window.location.href = "/error_403.html";
                    return;
                } else {
                    this.$message.error('未知错误');
                    return;
                }
            },
            //添加
            handleAdd() {
                // this.formData.adress = addresss;
                // alert(addresss);
                // this.formData.coordinates = coordinatess;
                // alert(coordinatess);

                let search = $("#adress").val();
                let coordinates = $("#coordinates").val();
                this.formData.coordinates = coordinates;
                this.formData.adress = search;

                axios.post("/sorting/save", this.formData).then(resp => {
                    //隐藏新增窗口
                    this.dialogFormVisible = false;
                    //判断是否添加成功
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                        //重新查询所有
                        this.findPage();
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })
            },

            // 重置表单
            resetForm() {
                this.formData = {};
            },

            // 弹出添加窗口
            handleCreate() {
                //重置表单数据
                this.resetForm();
                //展示新增弹出框
                this.dialogFormVisible = true;
                this.$nextTick(()=>{
                    this.BaiduMap();
                });

            },

            // 弹出编辑窗口
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true;
                // this.formData=row;  // 可以显示当前数据，但是最好查询数据库

                axios.get("/sorting/edit/" + row.id).then(resp => {
                    console.log(resp);
                    //处理响应结果
                    if (resp.data.flag) {
                        //查到了结果
                        //展示表格数据
                        this.formData = resp.data.data;
                        this.$nextTick(()=>{
                            this.editMap(resp.data.data.coordinates);
                        });

                    } else {
                        this.$message.error(resp.data.message);
                    }
                });
            },

            //编辑
            handleEdit() {
                let search = $("#adress").val();
                let coordinates = $("#coordinates").val();
                this.formData.coordinates = coordinates;
                this.formData.adress = search;
                axios.put("/sorting/update", this.formData).then(resp => {
                    //隐藏新增窗口
                    this.dialogFormVisible4Edit = false;
                    //判断是否添加成功
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                        //重新查询所有
                        this.findPage();
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })

            },

            // 删除
            handleDelete(row){

                this.$confirm("您确定要删除此记录吗?","提示",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    //发送异步请求
                    axios.delete("/sorting/delete/" + row.id).then(resp => {
                        console.log(resp);
                        //处理响应结果
                        if (resp.data.flag) {
                            this.$message.success(resp.data.message);
                            this.findPage();
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    });
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },

            // 百度地图
            BaiduMap(){
                var map = new BMap.Map("allmap");

                map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                var geoc = new BMap.Geocoder(); //地址解析对象

                var markersArray = [];

                var geolocation = new BMap.Geolocation();

                var point = null;

                // html5获取地理位置
                getLocation();
                // 创建一个函数，主要功能是在调用html5的geolocation()前，先判断当前浏览器是否支持html5，（PC绝大部分浏览器不支持或者拒绝html5定位）
                function getLocation() {
                    var options = {
                        enableHighAccuracy: true,
                        maximumAge: 1000
                    };
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
                    } else {
                        // 否则浏览器不支持geolocation
                        alert('您的浏览器不支持地理位置定位！');
                    }
                }

                // 成功时的回调函数
                function onSuccess(position) {
                    // 返回用户位置
                    // 经度
                    var longitude = position.coords.longitude;
                    // 纬度
                    var latitude = position.coords.latitude;
                    // 根据经纬度获取地理位置，不太准确，获取城市区域还是可以的
                    point = new BMap.Point(longitude, latitude);
                    map.centerAndZoom(point, 12); // 中心点
                }

                // 失败时的回调函数
                // 这里是错误提示信息
                function onError(error) {
                    switch (error.code) {
                        case 1:
                            alert("位置服务被拒绝！");
                            break;
                        case 2:
                            alert("暂时获取不到位置信息！");
                            break;
                        case 3:
                            alert("获取信息超时！");
                            break;
                        case 4:
                            alert("未知错误！");
                            break;
                    }
                    // 这里后面可以写你的后续操作了，下面的经纬度是天安门的具体位置
                    // 经度
                    var longitude = 116.4041;
                    // 纬度  116.403621,39.915884
                    var latitude = 39.9151;
                    point = new BMap.Point(longitude, latitude);
                    map.centerAndZoom(point, 12); // 中心点
                }


                geolocation.getCurrentPosition(function (r) {
                    console.log(r);
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        map.panTo(r.point);
                    }else {
                        alert('failed' + this.getStatus());
                    }
                }, {enableHighAccuracy: true})

                map.addEventListener("click", showInfo);


                //清除标识
                function clearOverlays() {
                    if (markersArray) {
                        for (i in markersArray) {
                            map.removeOverlay(markersArray[i])
                        }
                    }
                }
                //地图上标注
                function addMarker(point) {
                    var marker = new BMap.Marker(point);
                    markersArray.push(marker);
                    clearOverlays();
                    map.addOverlay(marker);
                }


                //点击地图时间处理
                function showInfo(e) {
                    longitude = e.point.lng;
                    latitude = e.point.lat;
                    $("#coordinates").val(longitude+","+latitude);
                    // 绑定数据
                    vue.formData.coordinates = longitude+","+latitude;

                    geoc.getLocation(e.point, function (rs) {
                        var addComp = rs.addressComponents;
                        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

                        // document.getElementById("search").value = address;
                        // addresss = address;
                        $("#adress").val(address);
                        vue.formData.adress = address;
                    });
                    addMarker(e.point);
                }

                // 获取表单信息
                // var local = new BMap.LocalSearch(map, {
                //     renderOptions:{map: map}
                // });
                // $("#search").change(function(){
                //     let search = $("#search").val();
                //     vue.formData.adress = address;
                //     // addresss = search;
                //     local.search(search);
                // });


                function G(id) {
                    return document.getElementById(id);
                }

                var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {"input" : "adress"
                        ,"location" : map
                    });

                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    var str = "";
                    var _value = e.fromitem.value;
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                    G("searchResultPanel").innerHTML = str;
                });

                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                    setPlace();
                });

                function setPlace(){
                    map.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        console.log('经度：'+pp.lng, '纬度：'+pp.lat);

                        // $("#coordinates").val(longitude+","+latitude);
                        // coordinatess = longitude+","+latitude;
                        $("#coordinates").val(pp.lng+","+pp.lat);
                        vue.formData.coordinates = pp.lng+","+pp.lat;

                        map.centerAndZoom(pp, 18);
                        map.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                }
            },



            editMap(coordinates) {
                var map = new BMap.Map("allmap");

                map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                var geoc = new BMap.Geocoder(); //地址解析对象

                var markersArray = [];

                var geolocation = new BMap.Geolocation();

                var split = coordinates.split(",");
                var point = new BMap.Point(split[0], split[1]);
                map.centerAndZoom(point, 12); // 中心点

                // 创建原来点标记并添加
                var marker1 = new BMap.Marker(new BMap.Point(split[0], split[1]));
                map.addOverlay(marker1);


                    map.addEventListener("click", showInfo);


                    //清除标识
                    function clearOverlays() {
                        if (markersArray) {
                            for (i in markersArray) {
                                map.removeOverlay(markersArray[i])
                            }
                        }
                    }
                    //地图上标注
                    function addMarker(point) {
                        var marker = new BMap.Marker(point);
                        markersArray.push(marker);
                        clearOverlays();
                        map.addOverlay(marker);
                    }


                    //点击地图时间处理
                    function showInfo(e) {
                        longitude = e.point.lng;
                        latitude = e.point.lat;
                        $("#coordinates").val(longitude+","+latitude);
                        // 绑定数据
                        vue.formData.coordinates = longitude+","+latitude;

                        geoc.getLocation(e.point, function (rs) {
                            var addComp = rs.addressComponents;
                            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

                            // document.getElementById("search").value = address;
                            // addresss = address;
                            $("#adress").val(address);
                            vue.formData.adress = address;
                        });
                        addMarker(e.point);
                    }

                    function G(id) {
                        return document.getElementById(id);
                    }

                    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                        {"input" : "adress"
                            ,"location" : map
                        });

                    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                        var str = "";
                        var _value = e.fromitem.value;
                        var value = "";
                        if (e.fromitem.index > -1) {
                            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                        }
                        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                        value = "";
                        if (e.toitem.index > -1) {
                            _value = e.toitem.value;
                            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                        }
                        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                        G("searchResultPanels").innerHTML = str;
                    });

                    var myValue;
                    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                        var _value = e.item.value;
                        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                        G("searchResultPanels").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                        setPlace();
                    });

                    function setPlace(){
                        map.clearOverlays();    //清除地图上所有覆盖物
                        function myFun(){
                            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                            console.log('经度：'+pp.lng, '纬度：'+pp.lat);

                            // $("#coordinates").val(longitude+","+latitude);
                            // coordinatess = longitude+","+latitude;
                            $("#coordinates").val(pp.lng+","+pp.lat);
                            vue.formData.coordinates = pp.lng+","+pp.lat;

                            map.centerAndZoom(pp, 18);
                            map.addOverlay(new BMap.Marker(pp));    //添加标注
                        }
                        var local = new BMap.LocalSearch(map, { //智能搜索
                            onSearchComplete: myFun
                        });
                        local.search(myValue);
                    }
            }
        }
    })
</script>

</html>